<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>mydemo</title>
	<style>
		ul,
		li {
			margin: 0;
			padding: 0;
		}

		#right {
			position: absolute;
			top: 0;
			left: 0;
			list-style-type: none;
			width: 35px;
			margin: 0 auto;
			border: 1px solid #0ff;
			display: none;
		}

		#right a {
			text-decoration: none;
			color: #0aa;
		}

		#right li:hover {
			background: #055;
		}
	</style>
	<script>
		window.onload = function () {
			var oRight = document.getElementById("right");
			document.oncontextmenu = function (ev) {
				var oEvent = ev || window.event;

				if (oEvent.button == 2) {
					oRight.style.display = "block";
					oRight.style.top = oEvent.clientY + "px";
					oRight.style.left = oEvent.clientX + "px";
				}
				// 阻止冒泡
				return false;
			}
			document.onclick = function () {
				oRight.style.display = "none";
			}
		}
	</script>
</head>

<body>
	<ul id="right">
		<li><a href="#">剪切</a></li>
		<li><a href="#">复制</a></li>
		<li><a href="#">粘贴</a></li>
	</ul>
</body>

</html>